<template>
  <div class="box">
    <div class="head">0条真实用户评论</div>
    <div class="the_score">
      <div class="comments_combined">
        <ul>
          <li>总评数：118</li>
          <li>好评数：54</li>
          <li>差评数：5</li>
        </ul>
      </div>
      <div class="recommend">推荐</div>
      <div class="xin">
        <i class="el-rate_icon el-icon-star-on"></i>
        <i class="el-rate_icon el-icon-star-on"></i>
        <i class="el-rate_icon el-icon-star-on"></i>
        <i class="el-rate_icon el-icon-star-on"></i>
        <i class="el-rate_icon el-icon-star-on" style="color:#eff2f7"></i>
        4分
      </div>
      <div class="circle">
        <!-- 环境评分 -->
        <div class="environment">
          <el-progress
            type="circle"
            :percentage="75"
            status="warning"
            :show-text="false"
            :width="70"
            :stroke-width="2"
            color="#ff9900"
          ></el-progress>
          <div class="grade">
            <div>环境</div>
            <div>7.5</div>
          </div>
        </div>
        <!-- 产品评分 -->
        <div class="environment">
          <el-progress
            type="circle"
            :percentage="86"
            status="warning"
            :show-text="false"
            :width="70"
            :stroke-width="2"
            color="#ff9900"
          ></el-progress>
          <div class="grade">
            <div>产品</div>
            <div>8.6</div>
          </div>
        </div>
        <!-- 服务评分 -->
        <div class="environment">
          <el-progress
            type="circle"
            :percentage="71"
            status="warning"
            :show-text="false"
            :width="70"
            :stroke-width="2"
            color="#ff9900"
          ></el-progress>
          <div class="grade">
            <div>服务</div>
            <div>7.1</div>
          </div>
        </div>
      </div>

      <el-button @click="dialogFormVisible = true" class="bton">+ 写点评</el-button>
      <!-- 评分页面 -->
      <el-dialog :title="hotelData.name" :visible.sync="dialogFormVisible">
        <el-form :model="form">
          <!-- 评分 -->
          <el-form-item label="总体评价" :label-width="formLabelWidth">
            <el-rate v-model="form.score.all" show-text></el-rate>
          </el-form-item>
          <el-form-item label="设施" :label-width="formLabelWidth">
            <el-rate v-model="form.score.fancility" show-text></el-rate>
          </el-form-item>
          <el-form-item label="服务" :label-width="formLabelWidth">
            <el-rate v-model="form.score.service" show-text></el-rate>
          </el-form-item>
          <el-form-item label="位置" :label-width="formLabelWidth">
            <el-rate v-model="form.score.location" show-text></el-rate>
          </el-form-item>
          <!-- 评分 -->
          <!-- 内容 -->
          <el-form-item label="内容" :label-width="formLabelWidth">
            <el-input type="textarea" :rows="2" placeholder="请输入内容" v-model="form.content"></el-input>
          </el-form-item>
          <el-form-item label="上传图片" :label-width="formLabelWidth">
            <!-- 图片 -->

            <el-upload
              action="http://157.122.54.189:9095/upload"
              list-type="picture-card"
              name="files"
              :on-preview="handlePictureCardPreview"
              :on-remove="handleRemove"
              :on-success="coverSuccess"
            >
              <i class="el-icon-plus"></i>
            </el-upload>
            <el-dialog :visible.sync="dialogVisible">
              <img width="100%" :src="dialogImageUrl" alt />
            </el-dialog>

            <!-- /图片 -->
          </el-form-item>
          <el-form-item label=" " :label-width="formLabelWidth">
            <el-button type="primary" @click="submit">提 交</el-button>
          </el-form-item>
        </el-form>
      </el-dialog>
      <!-- 评分页面 -->
    </div>
  </div>
</template>

<script>
export default {
  props: ["data"],
  data() {
    return {
      fileList: [], // 回复id
      dialogImageUrl: "", //预览图片URL
      dialogVisible: false, //图片
      dialogTableVisible: false,
      dialogFormVisible: false, // 弹出框
      hotelData: "", //父组件传过来的数据
      form: {
        score: {
          all: null, //总体评分
          fancility: null, //设施评分
          service: null, //服务评分
          location: null, // 位置评分
        },
        content: null, // 内容
        pics: [], // 图片数据
      },
      formLabelWidth: "120px",
    };
  },
  watch: {
    data: {
      handler(val) {
        this.hotelData = val;
        console.log(this.hotelData);
      },
      deep: true,
    },
  },
  methods: {
    init() {
      this.$axios({
        url: "/hotels/comments",
      }).then((res) => {
        console.log(res);
      });
    },
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePictureCardPreview(file) {
      console.log("执行handlePictureCardPreview");

      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    coverSuccess(res, file, fileList) {
      this.form.pics.push(file.response[0]);
      console.log("this.form.pics--------------------");
      console.log(this.form.pics);
    },
    submit() {
      this.dialogFormVisible = false;

      if (!this.form.content) {
        this.$message.error("请完善全部信息");
        return;
      }

      let data = {
        score: this.form.score,
        content: this.form.content, //内容
        pics: this.form.pics, // 图片
        hotel: this.$route.query.id, // 酒店id
      };
      this.$axios({
        url: "/comments",
        method: "post",
        data,
        headers: {
          Authorization: `Bearer ${
            this.$store.state.user.userInfo.token || "NO TOKEN"
          }`,
        },
      }).then((res) => {
        this.$message({
          type: "success",
          message: "评论成功",
        });
        this.init();
        console.log(res.data);
      });
    },
  },
};
</script>

<style lang="less" scoped>
.box {
  .head {
    font-weight: 700;
  }
  .the_score {
    display: flex;
    position: relative;
    .comments_combined {
      margin: 15px 0 15px 0;
    }
    .recommend {
      border: 2px solid #fa3;
      color: #fa3;
      font-size: 24px;
      text-align: center;
      line-height: 70px;
      width: 70px;
      height: 70px;
      border-radius: 50%;
      opacity: 0.25;
      transform: rotate(-30deg);
      margin: 10px 130px 0 100px;
    }
    .xin {
      position: absolute;
      left: 168px;
      top: 33px;
      color: #f7ba2a;
    }
    .circle {
      margin-top: 10px;
      display: flex;
      .environment {
        position: relative;
        margin-right: 50px;
        .grade {
          position: absolute;
          left: 19px;
          top: 13px;
          text-align: center;
          color: #ff9900;
        }
      }
    }
    .bton {
      width: 90px;
      height: 25px;
      background-color: #ff9900;
      color: #fff;
      margin: 60px 0 0 165px;
      line-height: 0;
    }
    /deep/.el-dialog__title {
      flex-wrap: 700;
      font-size: 22px;
    }

    .el-rate {
      line-height: 3;
    }
  }
}
</style>